<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas{
            background-color: aliceblue;
        }
    </style>
</head>
<body>
    <canvas id="canvas"  height="500px" width="500px"> </canvas>
    <script>
    var canvas=document.getElementById("canvas")
    var ctx=canvas.getContext("2d")
    let round={
        x:50,
        y:50,
        size:20,
        sx:5,
        sy:4
    }
    function drawRound(){
        ctx.clearRect(0,0,canvas.width,canvas.height)
        ctx.beginPath()
        ctx.fillStyle="red"
        ctx.arc(round.x,round.y,round.size,0,2*Math.PI)
        ctx.fill()
    }
    
    function update(){
        drawRound()
        round.x+=round.sx
        round.y+=round.sy
        if(round.x+round.size>canvas.width || round.x-round.size<0){
            round.sx*=-1
        }
        if(round.y+round.size>canvas.height || round.y-round.size<0){
            round.sy*=-1
        }
        requestAnimationFrame(update)
    }
    update()
    </script>
</body>
</html>